<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form v-if="show" class="searchform" :model="params" :inline="true" size="mini">
            <el-form-item label="WM EAN NBR (14-D)：">
              <el-input v-model="params.wmEanNbr" placeholder="输入对应列名搜索" clearable style="width: 200px;" class="filter-item" />
            </el-form-item>
            <el-form-item label="USED BY：">
              <el-input v-model="params.usedBy" placeholder="输入对应列名搜索" clearable style="width: 200px;" class="filter-item" />
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" style="float:right;margin-right:0px;" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              <el-button size="mini" type="primary" style="float:right;margin-right:0px;" icon="el-icon-search" round @click="toQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:0px">
      <el-table :data="data" stripe size="small" border style="width: 100%;">
        <el-table-column :show-overflow-tooltip="true" label="WM EAN NBR (14-D)" prop="wmEanNbr" />
        <el-table-column :show-overflow-tooltip="true" label="条码检验码" prop="upcCheckCode" />
        <el-table-column :show-overflow-tooltip="true" label="USED BY" prop="usedBy" />
        <el-table-column :show-overflow-tooltip="true" label="分配类型" prop="sourceType">
          <template slot-scope="scope">
            <span v-if="scope.row.sourceType === '1'">ias系统</span>
            <span v-if="scope.row.sourceType === '2'">macro</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="APPLY DATE" prop="dateTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dateTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import initServiceData from '@/utils/initServiceData'
import { parseTime } from '@/utils/index'

export default {
  mixins: [initServiceData],
  data() {
    return {
      parent: this,
      activeName: '1',
      ruleApplyTypes: [{ name: '', value: null }],
      options: [],
      ids: [],
      show: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
    // this.loadApplyType()
    // this.loadSheetNames()
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = '/applyStoreCode/queryListInfo'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    resetForm() {
      this.params = { rowSite: '', rowName: '', options: [] }
    },
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    toItemInfo(item) {
      console.log('sss:' + item.createdBy)
      const _this = this.$refs.itemForm
      _this.itemInfo = item // JSON.parse(
      _this.dialog = true
    }
  }
}
</script>
